<template>
  <div>
    <PageHeader hidden-breadcrumb>
        <template #title><div class="demo-title">菜单权限管理</div></template>
        <template #content>
          <div class="demo-content">页面数据为 Mock 示例数据，非真实数据。</div>
        </template>
    </PageHeader>
    <Row :gutter="20" style="margin:20px;">
        <i-col :lg="9">
            <Card>
                <template #title>
                    <Button type="primary" icon="md-add" ghost>新增菜单</Button>
                    <Button type="primary" icon="md-list" style="margin-left:5px;" ghost @click="expandBtn">{{expand?'全部收起':'全部展开'}}</Button>
                </template>
                <template #extra>

                </template>
                <Scroll height="550">
                    <Tree :data="data" show-checkbox @on-select-change="selectChange"></Tree>
                </Scroll>
            </Card>
        </i-col>
        <i-col :lg="15">
            <Card>
                <template #title>
                    {{editTitle}}
                </template>
                <template #extra>

                </template>
                <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                    <FormItem label="类型" prop="name">
                        侧边栏菜单
                    </FormItem>
                    <FormItem label="标题" prop="title">
                        <Input v-model="formValidate.title"></Input>
                    </FormItem>
                    <FormItem label="副标题" prop="city">
                        <Input v-model="formValidate.name"></Input>
                    </FormItem>
                    <FormItem label="路径">
                        <Input v-model="formValidate.menuLink"></Input>
                    </FormItem>
                    <FormItem label="打开方式" prop="gender">
                        <RadioGroup v-model="formValidate.gender">
                            <Radio label="当前窗口"></Radio>
                            <Radio label="新窗口"></Radio>
                        </RadioGroup>
                    </FormItem>
                    <FormItem label="图标" prop="icon">
                        <IconSelect :icon="formValidate.icon"/>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" @click="handleSubmit('formValidate')">保存修改</Button>
                        <Button @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                    </FormItem>
                </Form>
            </Card>
        </i-col>
    </Row>
    
  </div>
</template>

<script>
import MenuData from '@/utils/MenuData.json'
import IconSelect from '@/components/public/icon-select.vue'
export default {
    components:{
        IconSelect
    },
    data () {
        return {
            parentMenus: MenuData.applysList,
            applyMenusList: MenuData.applyMenusList,
            data:[],
            editTitle:'编辑菜单：',
            formValidate: {
                
            },
            ruleValidate: {
                
            },
            expand:true
        }
    },
    created(){
        this.getMenus();
    },
    methods: {
        selectChange(item){
            this.editTitle = '编辑菜单：'+item[0].title
            this.formValidate = item[0]
        },
        expandBtn(){
            this.expand = !this.expand
            this.parentMenus.forEach(element => {
                element.expand = this.expand
            });
        },
        getMenus(){
            this.data = []
            this.parentMenus.forEach((menu,index) => {
                menu.expand = false
                menu.children = this.applyMenusList[menu.appcode]
                if(index==0){
                    menu.expand = true
                }
            });
            this.data = this.parentMenus
        }
    }
}
</script>
